<template>
  <!--患者列表 -->
  <div class="h-full flex flex-col">
    <SearchComb placeholder="姓名/助记码/卡号/住院号" @search="searchChange" />
    <div class="flex justify-center my-2">
      <a-radio-group v-model:value="statusType" button-style="solid" class="w-full" @change="radioChange">
        <a-radio-button value="0" class="w-6/12 text-center">未准备 {{ operateNum.unReady }} </a-radio-button>
        <a-radio-button value="1" class="w-6/12 text-center">已准备 {{ operateNum.ready }} </a-radio-button>
      </a-radio-group>
    </div>
    <BaseList :data-source="dataSource" :loading="loading" class="w-full">
      <template #renderItem="{ item }">
        <div class="py-2 px-3" :class="selectedItem?.aptmLsh === item?.aptmLsh ? 'active' : ''" @click="onClick(item)">
          <div class="flex justify-between items-center">
            <div class="text-base font-bold text-primary truncate w-24" :title="item.brName">{{ item.brName }}</div>
            <div class="flex-1 text-left font-semibold">{{ item.oprRoomName }}</div>
            <div class="w-20 text-right font-semibold">{{ item.oprDate?.substring(5, 10) }} {{ item.oprTime }}</div>
          </div>
          <div class="flex justify-between items-end pt-2">
            <a-tooltip v-if="item.oprName" :title="item.oprName.length > 8 ? item.oprName : ''" placement="bottomLeft" :mouse-enter-delay="0.6">
              <div class="flex-1 truncate text-sm">{{ item.oprName }}</div>
            </a-tooltip>
            <div v-else class="flex-1 truncate">无名称</div>
          </div>
        </div>
      </template>
    </BaseList>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import userStore from '../store'
import SearchComb from './SearchComb'

const store = userStore()
const emit = defineEmits(['select'])
const loading = ref(false)
const dataSource = ref([])
const unReadyData = ref([])
const readyData = ref([])
const selectedItem = ref()
const statusType = ref('0')
const formState = ref({})
const operateNum = ref({
  unReady: 0,
  ready: 0
})

const onClick = (item) => {
  selectedItem.value = item
  emit('select', item)
}

watch(
  () => store,
  (val) => {
    if (val.refresh) {
      getUnInpList()
      getReadyInpList()
      store.refresh = false
    }
  },
  {
    deep: true
  }
)
const searchChange = (e) => {
  const { searchKey, startDate, endDate } = e
  formState.value.pyjm = searchKey
  formState.value.stdate = startDate
  formState.value.eddate = endDate
  getUnInpList()
  getReadyInpList()
}

// 获取左侧未准备患者列表
const getUnInpList = async () => {
  const { code, data, msg } = await post('/oprOperation/opr/getOperationAppointmentList', {
    ...formState.value,
    status: '1',
    preparationStatus: '0'
  })
  if (code !== 0) return message.error(msg)
  operateNum.value.unReady = data?.length
  unReadyData.value = data
  radioChange()
}
// 获取左侧已准备患者列表
const getReadyInpList = async () => {
  const { code, data, msg } = await post('/oprOperation/opr/getOperationAppointmentList', {
    ...formState.value,
    status: '1',
    preparationStatus: '1'
  })
  if (code !== 0) return message.error(msg)
  operateNum.value.ready = data?.length
  readyData.value = data
  radioChange()
}
const radioChange = () => {
  if (statusType.value === '0') {
    dataSource.value = unReadyData.value
  } else {
    dataSource.value = readyData.value
  }
  store.dataSource = dataSource.value
  onClick(dataSource.value[0])
}
</script>
